<template>
   <div>
        <img :src="bigImage" style='width:375px;height:500px;border-radius:6px;' v-show="showBigImage" @click="showBigImage=false">
        
        <div style="margin-left:30px;width:370px;height:500px;overflow-y:auto" v-show="!showBigImage">
            <span>商家材料副本</span>
            <br><br>
            <el-upload
                :limit='12'
                :action="$store.state.upload"
                :on-success="uploadSuccess"
                :on-preview="showBig"
                :on-remove='removeImage'
                :file-list="merchant.imageList"
                list-type="picture-card">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
   </div>
</template>

<script>
export default {
    name: 'businessLicenceImage',
    data() {
      return {
          showBigImage:false,
          bigImage:''
      };
    },
    methods: {
        uploadSuccess:function(response,file,fileList){
            if(response!=null)this.merchant.imageList.push({name:file.url,url:response.data.filename});
            var str='';
            for(var i=0;i<this.merchant.imageList.length;i++){
                str=str+this.merchant.imageList[i].url+',';
            }
            if(str!="")str=str.substring(0,str.length-1);
            this.merchant.businessLicence=str;
        },
        showBig:function(file){
            this.bigImage=file.url;
            this.showBigImage=true;
        },
        removeImage:function(file,fileList){
            for(var i=0;i<this.merchant.imageList.length;i++){
                if(this.merchant.imageList[i].name==file.url){
                    this.merchant.imageList.splice(i,1);
                    break;
                }
            }
            this.uploadSuccess(null,file,fileList)
        }
    },
    props:['merchant']
}

</script>

<style scoped>

</style>
